/*
*   抖动效果
*   animation: jello-horizontal 0.9s both;
*/
@keyframes jello-horizontal {
    0% {
        transform: scale3d(1, 1, 1);
    }
    30% {
        transform: scale3d(1.25, 0.75, 1);
    }
    40% {
        transform: scale3d(0.75, 1.25, 1);
    }
    50% {
        transform: scale3d(1.15, 0.85, 1);
    }
    65% {
        transform: scale3d(0.95, 1.05, 1);
    }
    75% {
        transform: scale3d(1.05, 0.95, 1);
    }
    100% {
        transform: scale3d(1, 1, 1);
    }
};

/*
*   抖动效果 - 垂直
*   animation: jello-vertical 0.9s both;
*/
@keyframes jello-vertical {
    0% {
      -webkit-transform: scale3d(1, 1, 1);
              transform: scale3d(1, 1, 1);
    }
    30% {
      -webkit-transform: scale3d(0.75, 1.25, 1);
              transform: scale3d(0.75, 1.25, 1);
    }
    40% {
      -webkit-transform: scale3d(1.25, 0.75, 1);
              transform: scale3d(1.25, 0.75, 1);
    }
    50% {
      -webkit-transform: scale3d(0.85, 1.15, 1);
              transform: scale3d(0.85, 1.15, 1);
    }
    65% {
      -webkit-transform: scale3d(1.05, 0.95, 1);
              transform: scale3d(1.05, 0.95, 1);
    }
    75% {
      -webkit-transform: scale3d(0.95, 1.05, 1);
              transform: scale3d(0.95, 1.05, 1);
    }
    100% {
      -webkit-transform: scale3d(1, 1, 1);
              transform: scale3d(1, 1, 1);
    }
  }

// 文字进入效果 animation: tracking-in-contract 0.8s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
@keyframes tracking-in-contract {
    0% {
        letter-spacing: 1em;
        opacity: 0;
    }
    40% {
        opacity: 0.6;
    }
    100% {
        letter-spacing: normal;
        opacity: 1;
    }
};

// 文字立体效果 animation: text-shadow-pop-left 0.6s both;
@keyframes text-shadow-pop-left {
    0% {
        text-shadow: 0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555;
    }
    100% {
        text-shadow: -1px 0 #555555, -2px 0 #555555, -3px 0 #555555, -4px 0 #555555, -5px 0 #555555, -6px 0 #555555, -7px 0 #555555, -8px 0 #555555;
    }
    0%{
        text-shadow: 0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555;
    }
};

@keyframes text-pop-up-right {
    0% {
        transform: translateX(0);
        transform-origin: 50% 50%;
        text-shadow: none;
    }
    100% {
        transform: translateX(50px);
        transform-origin: 50% 50%;
        text-shadow: 0 1px 0 #cccccc, 0 2px 0 #cccccc, 0 3px 0 #cccccc, 0 4px 0 #cccccc, 0 5px 0 #cccccc, 0 6px 0 #cccccc, 0 7px 0 #cccccc, 0 8px 0 #cccccc, 0 9px 0 #cccccc, 0 50px 30px rgba(0, 0, 0, 0.3);
    }
};

/*
*   背景渐变效果
*   animation: gradient-bg 10s ease infinite;
*   background: linear-gradient(-45deg,#e8d8b9,#eccec5,#a3e9eb,#bdbdf0,#eec1ea);
*/
@keyframes gradient-bg {
    0% {
        background-position: 0 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0 50%;
    }
};

/*
*   旋转效果
*   animation: rotate-center 0.6s ease-in-out both;
*/
@keyframes rotate-center {
    0% {
        transform: rotate(0);
    }
    100% {
        transform: rotate(360deg);
    }
};

/*
*   摆动效果 - 右
*   animation: wobble-ver-right 0.8s both;
*/
@keyframes wobble-ver-right {
    0%,
    100% {
        transform: translateY(0) rotate(0);
        transform-origin: 50% 50%;
    }
    15% {
        transform: translateY(-30px) rotate(6deg);
    }
    30% {
        transform: translateY(15px) rotate(-6deg);
    }
    45% {
        transform: translateY(-15px) rotate(3.6deg);
    }
    60% {
        transform: translateY(9px) rotate(-2.4deg);
    }
    75% {
        transform: translateY(-6px) rotate(1.2deg);
    }
}

/*
*   摇动效果 
*   animation: shake-horizontal 0.8s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
*/
@keyframes shake-horizontal {
    0%,
    100% {
        transform: translateX(0);
    }
    // 10%,
    // 30%,
    // 50%,
    // 70% {
    //     transform: translateX(-5px);
    // }
    // 20%,
    // 40%,
    // 60% {
    //     transform: translateX(5px);
    // }
    // 80% {
    //     transform: translateX(4px);
    // }
    // 90% {
    //     transform: translateX(-4px);
    // }
    20%,
    60%{
        transform: translateX(-5px);
    }
    40%,
    80%{
        transform: translateX(5px);
    }
}
  

/*
*   跳动效果
*   animation: pulsate-bck 1s ease-in-out infinite both;
*/
@keyframes pulsate-bck {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(0.85);
    }
    100% {
        transform: scale(1);
    }
}
